<template>
  <div style="padding: 24px 0;">
    <router-link style="margin-left: 24px;" :to="{path:'/substitute/substituteApply'}"><a-button>调代课申请</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteApproval'}"><a-button>调代课审批</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteStatistics'}"><a-button>调代课统计</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteTeacherStatistics'}"><a-button>调代课统计（管理员）</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteSetting'}"><a-button>基础设置</a-button></router-link>
    <div class="attendance-tit">我的审批</div>
    <div class="line"></div>
    <div class="body">
      <div class="search-row">
        <div class="search-input">
          <div class="search-tit">调代课老师：</div>
          <a-select v-model="queryList.queryTeacherId" allowClear placeholder = "请选择" class="search-desc">
            <a-select-option
              v-for=" item in teacherNameList"
              :key="item.teacherId"
              :title="item.teacherName"
              :value="item.teacherId">{{ item.teacherName }}
            </a-select-option>
          </a-select>
        </div>
        <div class="search-input">
          <div class="search-tit">审批类型：</div>
          <a-select v-model="queryList.approveStatus" allowClear placeholder = "请选择" class="search-desc" >
            <a-select-option value="0">待审批</a-select-option>
            <a-select-option value="1">已同意</a-select-option>
            <a-select-option value="2">已拒绝</a-select-option>
            <a-select-option value="3">已撤销</a-select-option>
          </a-select>
        </div>
        <div class="search-input">
          <div class="search-tit">类型：</div>
          <a-select v-model="queryList.substituteType" allowClear placeholder = "请选择" class="search-desc">
            <a-select-option value="0">代课</a-select-option>
            <a-select-option value="1">调课</a-select-option>
            <a-select-option value="2">调课、代课</a-select-option>
          </a-select>
        </div>
        <div class="search-input">
          <div class="search-tit">申请时间：</div>
          <a-range-picker
            v-model="dataTimeList"
            class="search-desc"
            :placeholder = "dataPlaceholder"
            :show-time="{
              hideDisabledOptions: true,
              defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
            }"
            format="YYYY-MM-DD"
            @change="timeChange"
          />
        </div>
      </div>
      <a-button class="day-form-btn" type="primary" @click="getList()">搜索</a-button>
      <a-button class="day-form-btn" @click="reset">重置</a-button>
      <a-table :columns="columns" :data-source="applyList" class="table" :key="Date.now()" ref="table">
        <span slot="transferClasses" slot-scope="scope, record">{{ record.transferClasses + '节' }}</span>
        <span slot="approveStatus">审核状态
          <a-tooltip placement="bottomRight" title="整个申请记录的审核状态">
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="approveStatusDesc" slot-scope="scope, record">
          <div v-if="record.approveStatus == 0">待审批</div>
          <div v-if="record.approveStatus == 1">已同意</div>
          <div v-if="record.approveStatus == 2">已拒绝</div>
          <div v-if="record.approveStatus == 3">已撤销</div>
        </span>
        <span slot="substituteStatus">是否生效
          <a-tooltip placement="bottomRight" :title="sfsxTitle">
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="substituteStatusDesc" slot-scope="scope, record">
          <div v-if="record.substituteStatus == 0" class="substitute-status-desc"><a-icon class="substitute-status-desc-icon" type="history" />&nbsp;未生效</div>
          <div v-if="record.substituteStatus == 1" class="substitute-status-descs"><a-icon class="substitute-status-descs-icon" type="check-circle" />&nbsp;已生效</div>
        </span>
        <span slot="groupStatus" slot-scope="scope, record">
          <a-switch @click="statusSwitch(record)"  :checked="record.groupStatus === 1 ? true : false" />
        </span>
        <span slot="leaderParams" slot-scope="scope">
          <div v-if="scope[0]">{{ scope[0].userName }}</div>
          <div v-else>{{ '无' }}</div>
        </span>
        <span slot="memberParams" slot-scope="scope">
          {{ scope.length }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="detailChange(record.id)">详情</a>
        </span>
      </a-table>
      <a-modal v-model="detailsDialog" title="调代课详情" :footer="null" width="1000px">
        <div class="details-row">
          <div class="details-blue"></div>
          <div class="details-tit">申请信息</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">调代课时间：</div>
          <div class="details-vice-desc">{{ substituteApplyDetailData.substituteDateStr }}</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">调代课原因：</div>
          <div class="details-vice-desc">{{ substituteApplyDetailData.substituteReason }}</div>
        </div>

        <div class="details-row details-row-margin">
          <div class="details-blue"></div>
          <div class="details-tit">调代课信息</div>
        </div>

        <div v-for="(item,index) in substituteApplyDetailData.substituteCourseList" :key="index" class="details-card">
          <div class="details-vice-card">
            <div class="details-vice-card-row">
              <div class="details-vice-card-time">{{ item.courseDate }}</div>
              <div class="details-vice-card-time">{{ item.substituteCourseDate }}</div>
            </div>
            <div class="details-vice-card-row details-vice-card-row-margin">
              <div class="details-vice-card-desc">{{ item.courseName }}</div>
              <div class="details-vice-card-btn">
                <a-icon type="interaction" class="details-vice-card-icon" />
                <div v-if="item.substituteType == 0" class="details-vice-card-icon-desc">代课</div>
                <div v-if="item.substituteType == 1" class="details-vice-card-icon-desc">调课</div>
                <div v-if="item.substituteType == 2" class="details-vice-card-icon-desc">调课（自修）</div>
              </div>
              <div class="details-vice-card-desc">{{ item.substituteCourseName }}</div>
            </div>
            <div class="details-vice-card-row details-vice-card-row-margin">
              <div class="details-vice-card-name">
                <div class="details-vice-card-name-tit">{{ item.courseTeacherName }}</div>
                <div class="details-vice-card-name-line"></div>
                <div class="details-vice-card-name-tit">{{ item.courseClassName }}</div>
              </div>
              <div class="details-vice-card-name">
                <div class="details-vice-card-name-tit">{{ item.substituteTeacherName }}</div>
                <div class="details-vice-card-name-line"></div>
                <div class="details-vice-card-name-tit">{{ item.substituteTeacherDeptName }}</div>
              </div>
            </div>
          </div>
          <div v-if="item.approveStatus == 0" class="details-card-result">
            <a-icon class="details-card-result-icon-one" type="history" />
            <div class="details-card-result-tit">待审批</div>
          </div>
          <div v-if="item.approveStatus == 1" class="details-card-result">
            <a-icon class="details-card-result-icon-two" type="check-circle" />
            <div class="details-card-result-tit">已同意</div>
          </div>
          <div v-if="item.approveStatus == 2" class="details-card-result">
            <a-icon class="details-card-result-icon-three" type="close-circle" />
            <div class="details-card-result-tit">已拒绝</div>
          </div>
          <div class="details-card-result-time">{{ item.approveTime }}</div>
          <div class="details-card-result-desc">审批人意见：{{ itemapproveRemark }}</div>
        </div>

        <template v-if="substituteApplyDetailData.approvalFinal == 1">
          <div class="details-row details-row-margin">
            <div class="details-blue"></div>
            <div class="details-tit">审批信息</div>
          </div>
          <div v-for="(item,index) in substituteApplyDetailData.applyApprovalList" :key="index" >
            <div class="details-row details-vice-row">
              <div class="details-vice-tit">审批人：</div>
              <div class="details-vice-desc">{{ item.userName }}</div>
            </div>
            <div class="details-row details-vice-row">
              <div class="details-vice-tit">同意理由：</div>
              <div class="details-vice-desc">{{ item.approveRemark }}</div>
            </div>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .attendance-tit {
    font-size: 16px;
    color: #333333;
    margin: 24px 0 24px 24px;
  }
  .line {
    height: 1px;
    background: #E5E5E5;
  }
  .body {
    padding: 24px;
    .search-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .search-input {
        display: flex;
        align-items: center;
        .search-tit {
          font-size: 14px;
          color: #333333;
          white-space: nowrap;
        }
        .search-desc {
          width: 200px;
          margin-right: 40px;
        }

      }

    }
    .day-form-btn {
      margin-right: 10px;
      margin-top: 24px;
    }
    .table {
      margin-top: 24px;
      .substitute-status-desc {
        color: #FF8948;
      }
      .substitute-status-desc-icon {
        color: #FFFFFF;
        background-color: #FF8948;
        border-radius: 50%;
      }
      .substitute-status-descs {
        color: #00C73D;
      }
      .substitute-status-descs-icon {
        color: #FFFFFF;
        background-color: #00C73D;
        border-radius: 50%;
      }
    }
  }
  .details-row {
    display: flex;
    align-items: center;
    .details-blue {
      width: 4px;
      height: 14px;
      background: #4174FD;
      border-radius: 2px;
    }
    .details-tit {
      margin-left: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
    }
    .details-vice-tit {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .details-vice-desc {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
  }
  .details-vice-row {
    margin: 16px 0 0 10px;
  }
  .details-row-margin {
    margin-top: 32px;
  }
  .details-card {
    width: 592px;
    background: #F2F4FA;
    border-radius: 8px;
    margin-top: 16px;
    padding: 16px;
    .details-vice-card {
      height: 110px;
      background: #FFFFFF;
      border-radius: 8px;
      padding: 16px;
      .details-vice-card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .details-vice-card-time {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
        .details-vice-card-desc {
          font-size: 16px;
          font-weight: 600;
          color: #5B739B;
        }
        .details-vice-card-btn {
          height: 32px;
          background: rgba(65,116,253,0.2400);
          border-radius: 22px;
          padding: 6px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .details-vice-card-icon {
            font-size: 20px;
            color: #FFFFFF;
            background-color: #4174FD;
          }
          .details-vice-card-icon-desc {
            font-size: 14px;
            font-weight: 400;
            color: #4174FD;
            margin-left: 2px;
          }
        }

        .details-vice-card-name {
          display: flex;
          align-items: center;
        }
        .details-vice-card-name-tit {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .details-vice-card-name-line {
          width: 1px;
          height: 14px;
          background: #E5E5E5;
          margin: 0 12px;
        }
      }
      .details-vice-card-row-margin {
        margin-top: 3px;
      }
    }
    .details-card-result {
      display: flex;
      align-items: center;
      margin-top: 16px;
      .details-card-result-icon-one {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FF8948;
        border-radius: 50%;
      }
      .details-card-result-icon-two {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #4174FD;
        border-radius: 50%;
      }
      .details-card-result-icon-three {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FF394C;
        border-radius: 50%;
      }
      .details-card-result-tit {
        font-size: 14px;
        font-weight: 400;
        color: #FF8948;
        margin-left: 3px;
      }
    }
    .details-card-result-time {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      margin: 4px 0 0 17px;
    }
    .details-card-result-desc {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin: 12px 0 0 17px;
    }
  }
</style>
<script>
  const columns = [
    {
      title: '序号',
      customRender: (text,record,index) => `${index+1}`,
    },
    {
      title: '调代课时间',
      dataIndex: 'substituteDateStr',
    },
    {
      title: '类型',
      dataIndex: 'substituteTypeStr',
    },
    {
      title: '调代课节数',
      dataIndex: 'transferClasses',
      scopedSlots: { customRender: 'transferClasses' },
    },
    {
      title: '调代课来源',
      dataIndex: 'substituteSource',
    },
    {
      // title: '审核状态',
      dataIndex: 'approveStatus',
      slots: { title: 'approveStatus' },
      scopedSlots: { customRender: 'approveStatusDesc' },
    },
    {
      // title: '是否生效',
      dataIndex: 'substituteStatus',
      slots: { title: 'substituteStatus' },
      scopedSlots: { customRender: 'substituteStatusDesc' },
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'action' },
    }
  ];
  import moment from 'moment';
  import { substituteApprovePage,substituteApproveDetail,substituteTeacherStatisticsPage } from '@/api/apply'
  export default {
    data() {
      return {
        columns,
        visible:false,
        list: [],
        groupStatus: null,
        dataPlaceholder: ['开始时间','结束时间'],
        sfsxTitle: '1.调代课来源为教师请假：请假最终被审批通过后，调代课才生效；2.调代课来源为新增调代课：如果审批人只有被调代课老师，也只有所有老师都同意之后才能生效；如果除被调代课老师外，还需要其他人员审批，则待最终审批人审批通过后生效。',
        detailsDialog: false,
        queryList: {
          queryEndDate: undefined,
          queryStartDate: '2000-01-01',
          approveStatus: undefined,
          substituteType: undefined,
          queryTeacherId: undefined
        },
        applyList: [],
        dataTimeList: [],
        substituteApplyDetailData: {},
        teacherNameList: []
      }
    },
    created() {
      var date = new Date();
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
      this.queryList.queryEndDate = Y + M + D
      this.getList()
      this.substituteTeacherStatisticsPage()
    },
    methods: {
      moment,
      getList() {
        substituteApprovePage(this.queryList).then(response => {
          this.applyList = response.data.records
        })
        .catch(() => {
        })
      },
      substituteTeacherStatisticsPage() {
        substituteTeacherStatisticsPage().then(response => {
          this.teacherNameList = response.data.records
          console.log('teacherNameList',this.teacherNameList);
        })
        .catch(() => {
        })
      },
      //重置
      reset() {
        this.queryList = {
          queryEndDate: undefined,
          queryStartDate: '2000-01-01',
          approveStatus: undefined,
          substituteType: undefined
        }
        this.dataTimeList = undefined
      },
      timeChange(value,dateString) {
        console.log('dataTimeList',this.dataTimeList);
        this.queryList.queryStartDate = dateString[0]
        this.queryList.queryEndDate = dateString[1]
      },
      detailChange(id) {
        this.detailsDialog = true
        substituteApproveDetail(id).then(response => {
          this.substituteApplyDetailData = response.data
        })
        .catch(() => {
        })
      }
    },
  }
</script>
